<template>
  <div v-loading="!tableData.length" class="wrapper">
    <el-table v-if="tableData" ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
      <!-- <el-table-column type="selection" width="55"/> -->
      <el-table-column prop="date" label="日期" width="120" fixed />
      <el-table-column v-for="item of packages" :key="item.id" :prop="`stock_quantity${item.id}`" :label="item.package_name" width="400">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-row class="edit-box">
              <el-input v-model="scope.row[`stock_quantity${item.id}`]" style="margin-right:10px;" class="edit-input" size="small" />
              <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
            </el-row>
          </template>
          <el-tooltip :content="title" effect="dark" placement="top" class="edit-container">
            <div v-if="!scope.row.edit" ref="div" style="height:50px;cursor: pointer;width:100%" @dblclick="scope.row.edit=!scope.row.edit">{{ scope.row[`stock_quantity${item.id}`] }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.edit" type="success" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确认</el-button>
          <el-button v-else type="primary" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">编辑</el-button>
          <!-- <el-button type="primary" @click="handleDelete(scope)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { zeroFill } from '@/utils'
import { list, update } from '@/api/repertory'
export default {
  name: '',
  data() {
    return {
      dayNum: 15,
      date: [],
      list: [],
      packages: [],
      title: '双击两次编辑'
    }
  },
  computed: {
    tableData() {
      const obj = {}
      const result = []
      this.date.map((item, index) => {
        this.packages.map((subItem) => {
          obj[`package_name${subItem.id}`] = subItem.package_name
          obj[`stock_quantity${subItem.id}`] = subItem.stock_quantity
          obj[`package_price${subItem.id}`] = subItem.package_price
          obj[`id_${subItem.id}`] = subItem.id
        })
        obj.date = item
        obj.edit = false
        result.push({ ...obj })
      })
      console.log(result)
      return result.map((item) => {
        this.list.filter((subItem) => {
          if (item.date === subItem.date) {
            item[`stock_quantity${subItem.package_id}`] = subItem.quantity
            item[`package_price${subItem.package_id}`] = subItem.price
          }
        })
        return item
      })
    }
  },
  created() {
    this.initDate()
    this.getlist()
  },
  methods: {
    // 平年还是闰年
    _isLeap(year) {
      if (typeof year !== 'number') {
        return
      }
      return year % 4 === 0 ? year % 100 !== 0 ? 1 : year % 400 === 0 ? 1 : 0 : 0 // 判断是闰年还是平年
    },
    // 月份
    _MonthArray(year) {
      const array = [31, 28 + this._isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      return array
    },
    // 获取日期
    initDate() {
      const date = new Date()
      const month = date.getMonth()
      const day = date.getDate()
      const year = date.getFullYear()
      const current = this._MonthArray(year)[month]
      const currentMonth = zeroFill(month + 1)
      const half = day + this.dayNum
      if (half > current) {
        const next = this._MonthArray(year)[month + 1]
        const nextMonth = zeroFill(month + 2)
        const prevMonths = this.createdArray({ year, num: current, month: currentMonth }).slice(day - 1) // 当前月天数
        const nextMonths = this.createdArray({ year, num: next, month: nextMonth }).slice(0, half - current - 1) // 下月天数
        this.date = prevMonths.concat(nextMonths)
      } else {
        const newDate = this.createdArray({ year, num: current, month: currentMonth }).slice(day - 1, this.dayNum + day - 1)
        this.date = newDate
      }
    },
    createdArray(params) {
      const months = Array.from(new Array(params.num).keys())
      return months.map((item) => {
        item = `${params.year}-${params.month}-${zeroFill(item + 1)}`
        return item
      })
    },
    // 获取列表
    async getlist() {
      const res = await list()
      const { lists } = res.data.stocks
      const packages = res.data.stocks.package
      this.packages = packages
      this.list = lists
      console.log(packages, lists)
    },
    cancelEdit(params) {
      console.log(params)
      params.edit = false
    },
    async confirmEdit(params) {
      console.log(params)
      const obj = {}
      const { date } = params
      const result = []
      this.packages.map((item) => {
        console.log(item.id)
        obj[`package_id`] = params[`id_${item.id}`]
        obj[`quantity`] = params[`stock_quantity${item.id}`]
        result.push({ ...obj })
      })
      console.log(JSON.stringify(result), JSON.stringify(date))
      await update({ stock: JSON.stringify(result), date })
      this.$message.success({
        message: '设置成功',
        duration: 1000
      })
      params.edit = false
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  padding-top: 10px;
  box-sizing: border-box;
  .edit-box{
    display: flex;
    height: 50px;
    align-items: center;
    .cancel-btn{
      height: 32px;
    }
  }
}
</style>
